<template>
  <div class="stock-wrapper">

    <nav
      class="stock-nav"
      :class="{
        collapse: isCollapse,
      }">
      <el-menu
        background-color="var(--color-primary)"
        text-color="var(--color-primary-light)"
        active-text-color="#fff"
        router
        :default-active="activeRoute"
        :collapse="isCollapse"
        :translate="false">
        <el-menu-item
          v-for="(item) in menuItems"
          :key="item.text"
          :index="item.route"
          :route="item.route">
          <i class="el-icon-menu"></i>
          <template #title>
            {{ item.text }}
          </template>
        </el-menu-item>
      </el-menu>
    </nav>

    <main
      class="stock-main-content"
      :class="{
        collapse: isCollapse,
      }">

      <div class="stock-status-bar">
        <div class="stock-nav-collapse-btn">
          <i
            :class="['el-icon-s-'+(isCollapse ? 'unfold' : 'fold')]"
            @click="collapseChange"></i>
          {{ currentRoute }}
        </div>
        <div class="stock-message-btn-group">
          <i class="el-icon-message-solid"></i>
          <i class="el-icon-s-comment"></i>
        </div>

      </div>

      <div class="stock-main">
        <router-view />
      </div>

    </main>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRoute } from "vue-router";
import { ElMenu, ElMenuItem } from 'element-plus'
import GlobalData from '@/store/index'
import { ROUTE_CONSOLE_DASHBOARD, ROUTE_CONSOLE_PROFILE, ROUTE_CONSOLE_STOCKINFO, ROUTE_LOGIN, ROUTE_REGISTER } from './router/config'

export default defineComponent({
  components: {
    ElMenu,
    ElMenuItem,
  },
  setup() {
    // 导航栏
    const menuItems = [
      {
        text: 'Dashboard',
        icon: '',
        route: ROUTE_CONSOLE_DASHBOARD.use()
      },
      {
        text: 'Profile',
        icon: '',
        route: ROUTE_CONSOLE_PROFILE.use()
      },
      {
        text: 'StockInfo',
        icon: '',
        route: ROUTE_CONSOLE_STOCKINFO.use()
      },
      {
        text: 'Login',
        icon: '',
        route: ROUTE_LOGIN.use()
      },
      {
        text: 'Register',
        icon: '',
        route: ROUTE_REGISTER.use()
      },
    ]
    const activeRoute = ref(menuItems[0].route)
    // 根据路由，得到当前页标题
    const $route = useRoute()
    const currentRoute = ref('')
    watch($route, () => {
      activeRoute.value = $route.path
      const title = $route.path.split('/').pop() as string
      currentRoute.value = title[0].toUpperCase() + title.slice(1)
    })
    // 导航栏是否折叠
    const isCollapse = ref(false)
    const collapseChange = () => {
      isCollapse.value = !isCollapse.value
      GlobalData.menuCollapseHooksExecute()
    }

    return {
      menuItems,
      currentRoute,
      isCollapse,
      collapseChange,
      activeRoute,
    }

  }
})

</script>

<style lang="scss">

.stock-wrapper {

  display: flex;

  .stock-nav {
    width: 14rem;
    min-height: 100vh;
    background-color: var(--color-primary);
    overflow: hidden;
    transition: width .2s;

    &.collapse {
      width: 64px;
    }

  }

  .stock-main-content {
    width: calc(100% - 14rem);
    max-height: 100vh;
    overflow: auto;
    transition: width .2s;
    &.collapse {
      width: calc(100% - 64px);
    }
  }

  .stock-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // width: 100%;
    background-color: white;
    height: 4.375rem;
    position: relative;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15);
    font-size: 1.3rem;
    padding: 0 30px 0 15px;

    .stock-nav-collapse-btn {


      & > i {
        cursor: pointer;
      }

    }

    .stock-message-btn-group {
      i {
        cursor: pointer;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        margin-right: 20px;
      }
      i:first-child {
        background-image: linear-gradient(0, #ffe259, #ffa751);

      }

      i:last-child {
        background-image: linear-gradient(300deg, rgb(172, 204, 234), rgb(100, 149, 237));
      }
    }



  }

  .stock-main {
    padding: 1.5rem;
  }

}


</style>
